<template>
  <div class="com_contalner">
    <el-card class="box-card" shadow="never">
      <el-form
        :model="form"
        label-width="150px"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
          <el-input v-model="form.flashOrderOvertime" size="large">
            <template #append>分</template>
          </el-input>
          <div class="note-margin">未付款，订单自动关闭</div>
        </el-form-item>
        <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
          <el-input v-model="form.normalOrderOvertime" size="large">
            <template #append>分</template>
          </el-input>
          <div class="note-margin">未付款，订单自动关闭</div>
        </el-form-item>
        <el-form-item label="发货超过：" prop="confirmOvertime">
          <el-input v-model="form.confirmOvertime" size="large">
            <template #append>天</template>
          </el-input>
          <div class="note-margin">未收货，订单自动完成</div>
        </el-form-item>
        <el-form-item label="订单完成超过：" prop="finishOvertime">
          <el-input v-model="form.finishOvertime" size="large">
            <template #append>天</template>
          </el-input>
          <div class="note-margin">自动结束交易，不能申请售后</div>
        </el-form-item>
        <el-form-item label="订单完成超过：" prop="commentOvertime">
          <el-input v-model="form.commentOvertime" size="large">
            <template #append>天</template>
          </el-input>
          <div class="note-margin">自动五星好评</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import * as api from "@/request/api";
import { ElMessage, ElMessageBox } from "element-plus";
import type{ IorderSetting } from "@/request/OmsOrderSettingController";
import "element-plus/es/components/message-box/style/css";
import "element-plus/es/components/message/style/css";
const ruleFormRef = ref<FormInstance>();

let form:IorderSetting = reactive({
  flashOrderOvertime: "",
  normalOrderOvertime: "",
  confirmOvertime: "",
  finishOvertime: "",
  commentOvertime: "",
});

const rules = reactive<FormRules>({
  flashOrderOvertime: [
    { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
  ],
  normalOrderOvertime: [
    { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
  ],
  confirmOvertime: [
    { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
  ],
  finishOvertime: [
    { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
  ],
  commentOvertime: [
    { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
  ],
});
async function getorderSettingInteFn() {
  let res = await api.order.OrderSetting(1);
  form.commentOvertime = res.commentOvertime;
  form.normalOrderOvertime = res.normalOrderOvertime;
  form.confirmOvertime = res.confirmOvertime;
  form.finishOvertime = res.finishOvertime;
  form.flashOrderOvertime = res.flashOrderOvertime;
}
getorderSettingInteFn();
const onSubmit = () => {
  ElMessageBox.confirm("是否要提交修改?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let ress = await api.order.OrderSettingUpdate({
      flashOrderOvertime: form.flashOrderOvertime,
      normalOrderOvertime: form.normalOrderOvertime,
      confirmOvertime: form.confirmOvertime,
      finishOvertime: form.finishOvertime,
      commentOvertime: form.commentOvertime,
      id: 1,
    });
    ElMessage({
      type: "success",
      message: "提交成功!",
    });
  });
};
</script>

<style lang="scss" scoped>
.com_contalner {
  padding: 10px 20px;
}

.box-card {
  width: 790px;
  height: 412px;
  padding: 35px;
  margin: 20px auto;
}
.el-input {
  width: 265px;
}
.note-margin {
  margin-left: 15px;
}
</style>
